<template>
	<view class="qgd-content">
		<view class="qgd-info-box">
			<view id="qgd" class="qgd-box">
				<!-- 顶部信息 -->
				<view class="qgd-center-top-box">
					<img class="qgd-logo" src="/static/qgd_bank_icon.png" mode="aspectFit" />
					<text class="qgd-title">签购单</text>
				</view>
				<img class="qgd-line" src="/static/qgd_line.png" mode="scaleToFill" />
				<!-- 签购单信息 -->
				<view class="info-box">
					<view class="qgd-info-item">
						<text>TERMINAL NO</text>
						<view class="qgd-info-item-bottom">
							<text>终端机号</text>
							<text class="qgd-info-item-value-text">{{props.termNo}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>MERCHANT NAME</text>
						<view class="qgd-info-item-bottom">
							<text>商户名称</text>
							<text class="qgd-info-item-value-text">{{props.merName}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>ORDER NO</text>
						<view class="qgd-info-item-bottom">
							<text>商户编号</text>
							<text class="qgd-info-item-value-text">{{props.merNo}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>ISSUING BANK</text>
						<view class="qgd-info-item-bottom">
							<text>发卡行</text>
							<text class="qgd-info-item-value-text">{{props.bankName}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>ACQUIRING BANK</text>
						<view class="qgd-info-item-bottom">
							<text>收单行</text>
							<text class="qgd-info-item-value-text">{{props.agentNo}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>CARD NO</text>
						<view class="qgd-info-item-bottom">
							<text>卡号</text>
							<text class="qgd-info-item-value-text">{{bankCardNo}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>TRANSACTION</text>
						<view class="qgd-info-item-bottom">
							<text>交易类型</text>
							<text class="qgd-info-item-value-text">{{props.txnTypeName}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>ORDER ID</text>
						<view class="qgd-info-item-bottom">
							<text>交易流水号</text>
							<text class="qgd-info-item-value-text">{{props.thirdSeqNo}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>DATE/TIME</text>
						<view class="qgd-info-item-bottom">
							<text>日期/时间</text>
							<text class="qgd-info-item-value-text">{{props.txnTime}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>AMOUNT</text>
						<view class="qgd-info-item-bottom">
							<text>交易金额</text>
							<text class="qgd-info-item-value-text">{{props.txnAmount}}</text>
						</view>
					</view>
					<view class="qgd-info-item">
						<text>SIGNATURE</text>
						<view class="qgd-info-item-bottom">
							<text>持卡人签名</text>
							<text class="qgd-info-item-value-text"></text>
						</view>
					</view>
					<view class="qgd-info-sign" v-if="!$u.test.isEmpty(signImage)">
						<image class="qgd-info-sign-icon" :src="signImage" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="save-btn" @tap="saveActon">保存至相册</view>
		<sales-slip-pop ref="popRef" :data="imageData"></sales-slip-pop>
		
	</view>
</template>

<script setup>
 import { onLoad } from '@dcloudio/uni-app'
 import { ref,computed } from 'vue'
 import SalesSlipPop from './widgets/sales-slip-pop.vue'
 import { getSignImage } from '@/config/api.js'
 
 const popRef = ref(null)
 const imageData = ref(null)
 //签名图片base64
 const signImage = ref('')
 const props = defineProps()
 //格式化后的银行卡号
 const bankCardNo = computed(()=>{
 	return uni.$tools.formatBankCardNo(props.txnBankCard)
 })
 //保存图片
 const saveActon = ()=> {
	 uni.$tools.getImageByNodes('#qgd').then(res=>{
		 imageData.value = res.imgData
		 popRef.value.open()
	 })
 }
 onLoad(()=>{
	 getSignImageInfo()
 })
 //获取签名图片
 const getSignImageInfo = ()=>{
	 if(props.tradeNo){
		 getSignImage({tradeNo:props.tradeNo}).then(res=>{
			 const signUrl = res.result.signUrl
			 if(signUrl){
				 signImage.value = signUrl
			 }
		 }).catch(err=>{
			 
		 })
	 }
 }
</script>

<style lang="scss" scoped>
	.qgd-content {
		padding-bottom: 50rpx;
		.qgd-info-box{
			border-radius: 16rpx;
			overflow: hidden;
			margin: 30rpx;
			.qgd-box {
				box-sizing: border-box;
				background-color: #F1F4FD;
				border-left: 20rpx solid #3d526b;
				border-right: 20rpx solid #3d526b;
				padding: 0 40rpx;
				.qgd-center-top-box {
					display: flex;
					align-items: center;
					justify-content: center;
					padding-top: 30rpx;
					position: relative;
					font-size: 36rpx;
					font-weight: 500;
					.qgd-logo {
						left: 0;
						width: 96rpx;
						height: 60rpx;
						position: absolute;
					}
				}		
				.qgd-line {
					width: 100%;
					height: 8rpx;
				}
				.info-box{
					padding-top: 10rpx;
					color: $xh-title-color;
					font-size: 24rpx;
					font-weight: 500;
					padding-bottom: 24rpx;
					.qgd-info-item{
						margin-bottom: 24rpx;
						.qgd-info-item-bottom{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 10rpx;
							.qgd-info-item-value-text{
								color: #2C8DF4;
							}
						}
					}
					.qgd-info-sign{
						margin-top: 30rpx;
						display: flex;
						justify-content: center;
						.qgd-info-sign-icon{
							max-width: 200rpx;
						}
					}
				}
			}
		}
		.save-btn {
			margin: 50rpx 30rpx;
			background-color: $xh-theme-color;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 50rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
		}
	}
</style>